<template>
	<div class="cropper-app">
		<el-form :model="formValidate" :rules="ruleValidate" ref="formValidate" label-width="100px" class="demo-ruleForm">
			<div prop="mainImage">
				<div class="list-img-box">
					<div v-if="imgSrc" @click="uploadPicture('flagImg')">
						<img :src="imgSrc" style='width:350px;height:210px' alt="自定义封面">
					</div>
					<div v-else class="upload-btn" style="height: 210px;" @click="uploadPicture('flagImg')">
						<i class="el-icon-plus" style="font-size: 30px;"></i>
						<span>点此上传封面</span>
					</div>
				</div>
				<input type="hidden" v-model="formValidate.mainImage" placeholder="请添加封面">
			</div>
		</el-form>
		<!-- 剪裁组件弹窗 -->
		<el-dialog :visible.sync="cropperModel" center>
			<cropper-image :Name="cropperName" @uploadImgSuccess="handleUploadSuccess" ref="child">
			</cropper-image>
		</el-dialog>
		<!--查看大封面-->
		<el-dialog title="封面预览" :visible.sync="imgVisible" center>
			<img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>
	</div>
</template>
  
<script>
import CropperImage from "@/components/RouteEditor/CropperImage.vue";
export default {
	name: "Tailoring",
	components: { CropperImage },
	data() {
		return {
			formValidate: {
				mainImage: '',
			},
			ruleValidate: {
				mainImage: [
					{ required: true, message: '请上传封面', trigger: 'blur' }
				],
			},
			//裁切图片参数
			cropperModel: false,
			cropperName: '',
			imgName: '',
			imgVisible: false
		}
	},
	props: {
		imgSrc: String,
	},
	methods: {
		//封面设置
		uploadPicture(name) {
			this.cropperName = name;
			this.cropperModel = true;
		},
		//图片上传成功后
		handleUploadSuccess(data) {
			this.formValidate.mainImage = data
			this.imgName = data
			this.cropperModel = false;
			this.$bus.$emit('getCover', data)

		}
	},
	mounted() {
		this.formValidate.mainImage = this.$props.imgSrc
	}
}
</script>

<style lang="less" scoped>
.upload-list-cover {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 40px;
	align-items: center;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity 1s;
}

.cover_icon {
	font-size: 30px;
}

.upload-btn {
	width: 350px;
	height: 210px;
	font-size: 28px;
	color: #8c939d;
	line-height: 205px;
	text-align: center;
	border: 2px dashed #d9d9d9;
	border-radius: 6px;
}

.upload-btn:hover {
	border: 2px dashed #69b7ed;
}

.upload-btn i {
	margin: 5px;
}

/deep/ .el-dialog {
	border-radius: 10px;
	width: 1300px;
	height: 500px;
}
</style>
  